{include file="../application/admin/view/health/base.html" /}
<style>
	#userDetail {
		color: #444;
		padding: 0 20px 30px;
		background-color: #fff;
	}

	.header-tip {
		height: 50px;
		line-height: 50px;
		font-size: 14px;
	}

	.message-container {
		border: 1px solid #E6E6E6;
		padding: 20px 26px 0;
		margin-bottom: 30px;
	}

	.message-title {
		height: 62px;
		line-height: 62px;
		font-size: 16px;
	}

	.message-item {
		margin-bottom: 14px;
	}

	.message-tip {
		width: 56px;
		/* margin-right: 20px; */
		height: 34px;
		line-height: 34px;
		/* text-align: right; */
		text-align: justify;
		text-align-last: justify;
	}

	.message-tip-right {
		width: 70px;
		/* margin-right: 20px; */
		text-align: justify;
		text-align-last: justify;
	}

	.message-con {
		flex: 1;
		justify-content: space-between;
	}

	.avatar-img {
		width: 50px;
		height: 50px;
		border-radius: 6px;
		margin-right: 20px;
		border: 1px solid #E5E5E5;
	}

	.change-avatar {
		width: 88px;
		height: 32px;
		border: 1px solid #7438D5;
		border-radius: 4px;
		justify-content: center;
		cursor: pointer;
		color: #7438D5;
	}

	.message-money,
	.message-score {
		margin-right: 30px;
	}

	.page-container {
		justify-content: flex-end;
	}

	.table-img {
		width: 16px;
		height: 16px;
	}

	.date-tip {
		margin-left: 20px;
		color: #999;
	}

	.margin-right-20 {
		margin-right: 20px;
	}

	.el-popover {
		left: 46px;
		top: 10px;
		padding: 16px;
	}

	.popover-container > div {
		margin-bottom: 10px;
	}

	.popover-tip {
		width: 56px;
		color: #666;
		text-align: justify;
		text-align-last: justify;
	}

	.el-table th .cell,
	.el-table td .cell {
		display: block;
		line-height: 44px;
	}

	.agent-dialog.el-dialog {
		width: fit-content !important;
	}

	.agent-dialog.el-dialog .el-dialog__body {
		padding: 10px 20px;
	}

	.el-dialog-tip {
		color: #F8A92B;
		font-size: 12px;
		line-height: 20px;
		margin-bottom: 14px;
	}

	.el-dialog-search {
		margin-bottom: 14px;
	}

	.parent-agent-header {
		height: 40px;
		background: #F9F9F9;
		border: 1px solid #E6E6E6;
	}

	.parent-agent-header > div {
		text-align: center;
		line-height: 40px;
	}

	.parent-agent-id {
		width: 70px;
		text-align: center;
	}

	.parent-agent-message {
		width: 170px;
		text-align: center;
		padding: 0 10px;
	}

	.parent-agent-message .table-image {
		margin: 0 10px 0 0;
	}

	.parent-agent-body .parent-agent-id,
	.parent-agent-body .parent-agent-message {
		border-right: 1px solid #F7F7F7;
	}

	.parent-agent-phone {
		width: 110px;
		text-align: center;
		position: relative;
	}

	.parent-agent-item {
		height: 44px;
		border-bottom: 1px solid #E6E6E6;
		cursor: pointer;
	}

	.parent-agent-item:last-of-type {
		border: none;
	}

	.parent-agent-body {
		border: 1px solid #E6E6E6;
		border-top: none;
	}

	.parent-agent-search {
		margin-bottom: 14px;
	}

	.agent-refresh {
		position: absolute;
		top: -164px;
		color: #86848B;
		font-weight: 500;
		cursor: pointer;
	}

	.agent-refresh span {
		margin-left: 8px;
	}

	.parent-agent-item-active {
		background: rgba(116, 56, 213, 0.1);
	}

	.table-image {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin: 0 10px;
	}

	.parent-user-avatar {
		width: 32px;
		height: 32px;
		margin-right: 10px;
	}

	[v-cloak] {
		display: none
	}
</style>
<div id="detail" v-cloak>
	<div class="header-tip">
		基本信息
	</div>
	<div class="message-container">
		<el-row :gutter="60" type="flex" align="stretch">
			<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
				<div class="">
					<div class="message-item display-flex">
						<div class="display-flex margin-right-20">
							<div class="message-tip-right">订单号</div>
							:
						</div>
						<div class="message-con display-flex">
							<div class="message-money">
								{{data.order_no}}
							</div>
						</div>
					</div>
					<div class="message-item display-flex">
						<div class="display-flex margin-right-20">
							<div class="message-tip-right">订单状态</div>
							:
						</div>
						<div class="message-con display-flex">
							{{data.order_status_txt}}
						</div>
					</div>
					<div class="message-item display-flex">
						<div class="display-flex margin-right-20">
							<div class="message-tip-right">下单时间</div>
							:
						</div>
						<div class="message-con display-flex">
							{{data.created_at}}
						</div>
					</div>
				</div>
			</el-col>
			<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
				<div style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
					<div>
						<div class="message-item display-flex">
							<div class="display-flex margin-right-20">
								<div class="message-tip-right">订单金额</div>
								:
							</div>
							<div class="message-con display-flex">
								<div class="message-money">
									{{data.total_price}}
								</div>
							</div>
						</div>
						<div class="message-item display-flex">
							<div class="display-flex margin-right-20">
								<div class="message-tip-right">优惠金额</div>
								:
							</div>
							<div class="message-con display-flex">
								<div :class="{'text-color-gray':data.real_name==''}">
									{{data.discount_price}}
								</div>
							</div>
						</div>
						<div class="message-item display-flex">
							<div class="display-flex margin-right-20">
								<div class="message-tip-right">实付金额</div>
								:
							</div>
							<div class="message-con display-flex">
								<div :class="{'text-color-gray':data.real_name==''}">
									{{data.pay_price}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
	<div class="header-tip">
		商品信息
	</div>
	<div v-if="data" class="message-container">
		<el-table
				:data="data.order_item"
				style="width: 100%">
			<el-table-column
					:fixed="true"
					min-width="200"
					prop="goods_name"
					label="商品">
			</el-table-column>
			<el-table-column
					min-width="120"
					prop="account"
					label="充值账号">
			</el-table-column>
			<el-table-column
					min-width="200"
					prop="customer_order_no"
					label="充值单号">
			</el-table-column>
			<el-table-column
					prop="cost_price"
					label="成本价">
			</el-table-column>
			<el-table-column
					prop="original_price"
					label="原价">
			</el-table-column>
			<el-table-column
					prop="price"
					label="售价">
			</el-table-column>
			<el-table-column
					fixed="right"
					prop="status_txt"
					label="充值状态">
				<template slot-scope="scope">
					<div v-if="data.pay_status===0">
						待充值
					</div>
					<div v-else>
						{{scope.row.status_txt}}
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</div>